import defaultSettings from '@/settings'
import Cookies from 'js-cookie'
// 修改网页的配置 logo 头部固定
const { showSettings, fixedHeader, sidebarLogo } = defaultSettings

const THEME_KEY = 'theme-color'
const DEFAULT_THEME = '#386af4'

const state = {
  showSettings: showSettings,
  fixedHeader: fixedHeader,
  sidebarLogo: sidebarLogo,
  theme: Cookies.get(THEME_KEY) || DEFAULT_THEME
}

const mutations = {
  // 万能mutation
  // this.$store.commit('seetings/CHANGE_SETTING', { key: 'theme', value: '#000' })
  // this.$store.commit('seetings/CHANGE_SETTING', { key: 'fixedHeader', value: xxx })
  // this.$store.commit('seetings/CHANGE_SETTING', { key: 'showSettings', value: xxxxx })
  CHANGE_SETTING: (state, { key, value }) => {
    // eslint-disable-next-line no-prototype-builtins
    if (state.hasOwnProperty(key)) {
      state[key] = value
    }
    if (key === 'theme') {
      Cookies.set(THEME_KEY, value)
    }
  },
  resetTheme(state) {
    // 重置成默认颜色
    state.theme = DEFAULT_THEME
    // cookies中也要移出
    Cookies.remove(THEME_KEY)
  }
}

const actions = {
  // 万能action
  // this.$store.dispatch('settings/changeSetting', { key: 'theme', value: '#000' })
  changeSetting({ commit }, data) {
    commit('CHANGE_SETTING', data)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

